<template>
	<view>
		<u-navbar title="登录" :autoBack="true" leftText="返回" :border="true" placeholder>
		</u-navbar>

		<view class="input-box">
			<view class="phone">
				<u--input maxlength="11" placeholder="请输入手机号码" border="surround" v-model="phone"></u--input>
				<text @click="getCode">获取验证码</text>
			</view>
			<view class="smsCode">
				<u--input placeholder="请输入验证码" border="surround" v-model="smsCode"></u--input>
			</view> 
		</view>
		<view class="login">
			<u-button @click="login" type="error" text="立即登录"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '13800000000',
				smsCode: ''  // 验证码
			}
		},
		methods: {
			// 获取验证码
			getCode() {
				console.log(this.phone);
				var data = {
					phone: this.phone
				}
				this.$get('/user/getSmsCode',data).then(res=> { 
					this.smsCode = res.smsCode;
				}) 
			},
			 // 登录
			 login() {
				 var data = {
					 phone: this.phone,
					 smsCode: this.smsCode
				 }
				 this.$post('/user/login',data).then(res=> {
					 uni.setStorageSync('phone', this.phone);
					 uni.navigateBack();
				 })
			 }
		}
	}
</script>

<style>
	page {
		background-color: #f4f4f4;
	}

	.input-box {
		margin-top: 5px;
		/* background-color: #fff; */
	}

	.phone {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 10px;
		background-color: #fff;
	}
		
	.smsCode {
		background-color: #fff;
		margin-top: 2px;
	}
	.login {
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 30px;
	}
</style>